<template>
  <div>
      <shopheader></shopheader>
      <div class="show_goods_box">
        <div class="goods_img">
          <img :src="showInfor.pic" alt="">
          <div>
            人气评分
            <el-rate
              v-model="value"
              disabled
              show-score
              disabled-void-color="rgb(180, 180, 190)"
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
        </div>
        <div class="goods_infor">
          <div class="name"> {{showInfor.name}}</div>
          <div class="goods_title">
            {{showInfor.sub_title}}
          </div>
          <p>绝顶认证，高于国际，买退无忧</p>
          <p> 商家承诺，提供“24h免费服务”，畅想无忧退货</p>
          <div class="goods_price">
            价格 <span>￥{{showInfor.price}}</span><p>月销量100</p>
          </div>
          <div class="goods_size" v-if="showInfor.product_category_id === 19">
           尺寸 <el-button size="mini">128G</el-button> <el-button size="mini">256G</el-button>
          </div>
          <div class="goods_size" v-if="showInfor.product_category_id === 8">
           尺寸 <el-button size="mini">M</el-button> <el-button size="mini">XL</el-button>
          </div>
          <div class="goods_size" v-if="showInfor.product_category_id === 35">
           尺寸 <el-button size="mini">50英寸</el-button> <el-button size="mini">100英寸</el-button>
          </div>
          <div class="goods_size" v-if="showInfor.product_category_id === 29">
           尺寸 <el-button size="mini">39</el-button> <el-button size="mini">41</el-button>
          </div>
          <div class="num">
            <span>数量 </span> <el-input-number v-model="num" size="mini" :min="1" :max="10" label="描述文字"></el-input-number>
          </div>
          <div class="operation">
            <button>立即购买</button>
            <button>加入购物车</button>
          </div>
          <div class="goods_pay">
            承诺 <span>7天免退</span><span>运费险</span>
          </div>
          <div class="goods_pay">
            支付 <span>花呗</span><span>行用卡</span><span>集分宝</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Shopheader from '../components/Shopheader.vue'
export default {
  components: { Shopheader },
  data () {
    return {
      showInfor: { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
      sizeForm: {
        type: []
      },
      value: 4,
      num: 1
    }
  },
  created () {
    if (this.$route.params.key === undefined) {
      console.log('空')
    } else {
      this.showInfor = this.$route.params.key
      console.log(this.showInfor)
    }
  }
}
</script>
<style lang="less" scoped>
.show_goods_box{
  width:1000px;
  height: 545px;
  margin: 30px auto;
  background:rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .goods_img{
    width: 34vw;
    height: 100%;
    img{
      width: 100%;
      height: 90%;
    }
    div{
      margin-top: 10px;
      display: flex;
      align-items: center;
      font-weight: 800;
      .el-rate{
        margin: 0px 20px;
      }
    }
  }
  .goods_infor{
    width: 32vw;
    height: 100%;
    background: rgb(255, 255, 255);
    padding: 15px;
    .name{
      width: 400px;
      height: 30px;
      overflow: hidden;
      font-size: 30px;
      line-height: 30px;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }
    .goods_title{
      font-size: 16px;
      font-weight: 500;
      height: 40px;
      // background: darkblue;
      margin-bottom: 10px;
    }
    p{
      font-size: 10px;
      color: rgba(190, 189, 189, 0.573);
    }
    .goods_price{
      margin-top: 5px;
      line-height: 30px;
      font-size: 12px;
      height: 40px;
      padding: 0 10px;
      background: #fff1ce9b;
      span{
        font-size: 23px;
        font-weight: 700;
        color: red;
        margin-left: 20px;
      }
      :last-child{
        font-size: 12px;
        width: 65px;
        text-align: center;
        height: 40;
        line-height: 35px;
        padding: 0px;
        float: right;
        color: black;
      }
    }
    .goods_size{
      padding: 20px 10px 0 ;
      button {
        margin: 0 0 0 20px;
      }
    }
    .num{
      padding: 20px 10px 0 ;
      span{
        margin-right: 20px;
      }
    }
    .operation{
       padding: 20px 10px 0 ;
       button{
        height: 40px;
        width: 120px;
        color: brown;
        background: rgba(229, 216, 159, 0.635);
        border: 0px;
       }
      :last-child{
        margin-left: 40px;
        background: rgb(236, 210, 125);
      }
    }
    .goods_pay{
      padding: 20px 10px 0 ;
      span{
        margin: 0 20px;
      }
    }
  }
  .goods_infor p:nth-of-type(2){
    color: rgba(0, 149, 255, 0.833);
  }
}
button.active{
   background:red;
}
</style>
